<template>
    <div  v-wechat-title="$route.meta.title">
        <!--    类似login.vue，参考login.vue的注释    -->
        <el-card class="box-card" style="width: 400px;margin: 0 auto;text-align: center;">
            <div slot="header" class="clearfix">
                <span>注册</span>
            </div>
            <el-form inline>
                <el-form-item label="账号">
                    <el-input v-model="user.account" class="rge-input"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="密码">
                    <el-input v-model="user.password" class="rge-input"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="姓名">
                    <el-input v-model="user.name" class="rge-input"></el-input>
                </el-form-item>
                <br>
                <el-form-item>
                    <el-button  type="primary" @click="register" class="rge-button">注册</el-button>
<!--                    <div style="padding-left: 30px">-->
                        <span>已有账号？</span>
                        <router-link to="/welcome" style="color: #000000">去登录</router-link>
<!--                    </div>-->
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "register",
        data() {
            return {
                user: {},
            }
        },
        methods: {
            register() {
                this.$axios.post('/api/user/register', this.user)
                    .then((res) => {
                        if (res.data.status === 1) {
                            this.$message.success(res.data.msg);
                            this.$router.push('/welcome');
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
            }
        }
    }
</script>

<style scoped lang="scss">

    .rge-button{
        width: 150px;
        height: 50px;
        font-size: 20px;
        margin-left: 30px;
    }

    .el-form-item__label{
        color: wheat;
        font-size: 20px;
    }
    .box-card{
        background-color: rgba(111, 99, 99, 0.5);
        border: none;
        color: white;
        width: 400px;
        height: 380px;
    }
</style>